<template>
    <div class="child-content">
            <div class="form-show">
                <el-form ref="form" :inline="true" :model="formData" size="default">
                    <div class="self-form">
                        <el-form-item label="日期" prop="dateRange">
                            <el-date-picker v-model="dateRange" type="daterange" clearable range-separator="至" value-format="YYYY-MM-DD"
                                style="width: 448px" start-placeholder="开始日期" end-placeholder="结束日期" />
                        </el-form-item>
                        <el-form-item label="业务类型" prop="bizDesc" style="margin-right: 0">
                            <el-select v-model="formData.bizDesc" clearable style="width: 224px">
                                <el-option :label="item.dictLabel" :value="item.dictLabel" v-for="(item, index) in businessTypeList" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>

                    <div class="self-form">
                        <el-form-item label="资金状态" prop="fundStatus" style="margin: 0">
                            <el-select v-model="formData.fundStatus" clearable style="width: 224px">
                                <el-option :label="item.name" :value="item.value" v-for="(item, index) in fundStatusList" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="margin: 0">
                            <el-button type="primary" @click="queryData">查询</el-button>
                        </el-form-item>
                    </div>

                </el-form>
            </div>
            <div class="show-score-data">
                <div class="item-score-box">
                    <div class="item-score-label">累计获得积分</div>
                    <div class="item-score-num">
                        <div class="item-score-icon"> <img src="@/assets/images/score-icon.png" alt=""> </div>
                        <div class="item-socre-num-text item-socre-color-blue">{{scoreTotalInfo.allScore}}</div>
                    </div>
                </div>
                <div class="item-score-box">
                    <div class="item-score-label">剩余积分</div>
                    <div class="item-score-num">
                        <div class="item-score-icon"> <img src="@/assets/images/score-icon.png" alt=""> </div>
                        <div class="item-socre-num-text item-socre-color-green">{{scoreTotalInfo.score}}</div>
                    </div>
                </div>
                <div class="item-score-box">
                    <div class="item-score-label">消耗积分</div>
                    <div class="item-score-num">
                        <div class="item-score-icon"> <img src="@/assets/images/score-icon.png" alt=""> </div>
                        <div class="item-socre-num-text item-socre-color-red">{{scoreTotalInfo.freezeScore}}</div>
                    </div>
                </div>
            </div>
            <div class="data-table">
                <el-table :data="tableData" style="width: 100%;">
                    <el-table-column prop="id" label="序号" align="center" width="60">
                        <template #default="scope">
                            <div>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="fundStatus" label="类型" align="center" width="80">
                        <template #default="scope">
                            {{scope.row.fundStatus === '0' ? '收入' : '支出'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="bizDesc" label="业务类型" align="center" width="100"/>
                    <el-table-column prop="amount" label="积分" align="center" width="80">
                        <template #default="scope">
                            <div class="item-score">
                                <div class="item-score-icon"> <img src="@/assets/images/score-icon.png" alt="">
                                </div>
                                <div :class="['item-score-text', scope.row.amount > 0 && 'item-score-green',  scope.row.amount < 0 && 'item-score-red']">
                                    {{scope.row.amount}}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="业务标题" />

                    <el-table-column prop="bizTime" label="上传日期" align="center" width="160" />
                </el-table>
                <div class="pagination-box">
                    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :small="false"
                        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>
</template>

<script setup>
import { getIntegralList } from '@/api/vip'
import { getMemberType } from '@/api/common'

const dateRange = ref([])
const formData = reactive({
    startDate: '',
    endDate: '',
    fundStatus: '',
    bizDesc: ''
})
const businessTypeList = ref([])
const fundStatusList = ref([
    {
        name: '收入',
        value: '0'
    },
    {
        name: '支出',
        value: '1'
    }
])

watch(() => dateRange.value, (newVal, oldVal) => {
    if(newVal) {
        formData.startDate = newVal[0]
        formData.endDate = newVal[1]
    }else {
        formData.startDate = ''
        formData.endDate = ''
    }
})

const queryData = () => {
    pageNum.value = 1
    getTableData()
}

const scoreTotalInfo = ref({})
const pageSize = ref(10)
const pageNum = ref(1)
const total = ref(0)
const tableData = ref([])
const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
}
const handleCurrentChange = (val) => {
    pageNum.value = val
    getTableData()
}

const getTableData = async () => {
    const res = await getIntegralList({
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        ...formData
    })
    if(res) {
        let { data } = res
        scoreTotalInfo.value = data.jifenTotal
        tableData.value = data.jifenList
        total.value = res.total
    }
}

const getBusinessTypeList = async () => {
    const res = await getMemberType('sys_score_type')
    if(res) {
        let { data } = res
        businessTypeList.value = data
    }
}

onMounted(() => {
    getBusinessTypeList()
    getTableData()
})
</script>

<style lang="scss" scoped>
.form-show {
    border-radius: 8px;
    background: rgba(245, 245, 245, 1);
    padding: 16px;
    margin-bottom: 16px;

    .self-form {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.show-score-data {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .item-score-box {
        width: 275px;
        height: 100px;
        border-radius: 8px;
        background: rgba(244, 247, 255, 1);
        padding: 20px 24px;

        &:not(:last-child) {
            margin-right: 16px;
        }

        .item-score-label {
            color: rgba(5, 11, 32, 1);
            font-size: 14px;
            font-weight: 700;
            line-height: 30px;
            margin-bottom: 3px;
        }

        .item-score-num {
            display: flex;
            align-items: center;

            .item-score-icon {
                width: 24px;
                height: 24px;
                margin-right: 8px;
            }

            .item-socre-num-text {
                font-size: 20px;
                font-weight: 700;
                line-height: 30px;
            }

            .item-socre-color-blue {
                color: rgba(51, 133, 255, 1);
            }

            .item-socre-color-green {
                color: rgba(109, 198, 128, 1);
            }

            .item-socre-color-red {
                color: rgba(235, 82, 79, 1);
            }
        }
    }
}

.data-table {
    width: 100%;
    height: auto;
    position: relative;

    .item-score {
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(102, 102, 102, 1);
        font-size: 14px;
        font-weight: 500;
        line-height: 30px;

        .item-score-icon {
            width: 16px;
            height: 16px;
            margin-right: 4px;
        }
    }

    .item-score-text {
        font-size: 14px;
        font-weight: 500;
        line-height: 30px;
    }

    .item-score-green {
        color: rgba(109, 198, 128, 1);
    }

    .item-score-red {
        color: rgba(235, 82, 79, 1);
    }

    .item-status-icon {
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 16px;
            height: 16px;
        }
    }

    .opt-btn {
        display: flex;
        align-items: center;

        .item-opt-img {
            width: 16px;
            height: 16px;

            &:not(:last-child) {
                margin-right: 24px;
            }
        }
    }

    .pagination-box {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 24px;
    }
}

::v-deep {
    .el-input__wrapper {
        box-shadow: none;
    }

    .el-table th.el-table__cell {
        background-color: transparent;
        border-bottom-color: transparent;
        color: rgba(5, 11, 32, 1);
    }

    .el-select__placeholder {
        color: rgba(5, 11, 32, 1);
        font-size: 14px;
        font-weight: 500;
    }

    .el-range-input {
        color: rgba(5, 11, 32, 1);
        font-size: 14px;
        font-weight: 500;
    }

    .el-form-item__label {
        color: rgba(5, 11, 32, 1);
        font-size: 14px;
        font-weight: 500;
    }
}
::v-deep {
    .el-input__wrapper {
        box-shadow: none;
    }

    .el-table th.el-table__cell {
        background: rgba(244, 247, 255, 1);
        border-bottom-color: transparent;
        color: rgba(5, 11, 32, 1);
    }

    .el-select__placeholder {
        color: rgba(5, 11, 32, 1);
        font-size: 14px;
        font-weight: 500;
    }

    .el-range-input {
        color: rgba(5, 11, 32, 1);
        font-size: 14px;
        font-weight: 500;
    }

    .el-form-item__label {
        color: rgba(5, 11, 32, 1);
        font-size: 14px;
        font-weight: 500;
    }
}
</style>